<template>
  <div class="main-view">
    <!-- 顶部导航栏 -->
 
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <div class="menu-col">
          <div class="menu-card">
            <div class="menu-list">
              <ul class="menu">
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'dashboard' }"
                  @click="handleMenuSelect('dashboard')"
                  title="工作台"
                >
                  <el-icon><House /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'patients' }"
                  @click="handleMenuSelect('patients')"
                  title="患者管理"
                >
                  <el-icon><User /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'dicom-viewer' }"
                  @click="handleMenuSelect('dicom-viewer')"
                  title="影像查看器"
                >
                  <el-icon><Picture /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'upload' }"
                  @click="handleMenuSelect('upload')"
                  title="文件上传"
                >
                  <el-icon><Upload /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'analysis' }"
                  @click="handleMenuSelect('analysis')"
                  title="影像分析"
                >
                  <el-icon><DataAnalysis /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'reports' }"
                  @click="handleMenuSelect('reports')"
                  title="报告管理"
                >
                  <el-icon><Document /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'user-management' }"
                  @click="handleMenuSelect('user-management')"
                  title="用户管理"
                >
                  <el-icon><User /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'health-management' }"
                  @click="handleMenuSelect('health-management')"
                  title="健康管理"
                >
                  <el-icon><Document /></el-icon>
                </li>
                <li 
                  class="menu-item" 
                  :class="{ active: activeMenu === 'settings' }"
                  @click="handleMenuSelect('settings')"
                  title="系统设置"
                >
                  <el-icon><Setting /></el-icon>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="content-col">
          <div class="content-card">
            <div class="card-header">
              <span>{{ contentTitle }}</span>
            </div>
            <div class="content-area">
              <div v-if="activeMenu === 'dashboard'">
                <h3>工作台</h3>
                <p>这里是系统工作台，显示关键指标和快捷操作。</p>
              </div>
              <div v-else-if="activeMenu === 'patients'">
                <PatientListView />
              </div>
              <div v-else-if="activeMenu === 'dicom-viewer'">
                <h3>影像查看器</h3>
                <p> DICOM 影像查看和基本操作功能。</p>
              </div>
              <div v-else-if="activeMenu === 'upload'">
                <UploadTestView />
              </div>
              <div v-else-if="activeMenu === 'analysis'">
                <h3>影像分析</h3>
                <p>高级影像分析和处理工具。</p>
              </div>
              <div v-else-if="activeMenu === 'reports'">
                <h3>报告管理</h3>
                <p>生成、查看和管理诊断报告。</p>
              </div>
              <div v-else-if="activeMenu === 'settings'">
                <h3>系统设置</h3>
                <p>这里是系统设置页面</p>
              </div>
              <div v-else-if="activeMenu === 'user-management'">
                <UserManagementView />
              </div>
              <div v-else-if="activeMenu === 'health-management'">
                <HealthManagementView />
              </div>
              <div v-else>
                <h3>欢迎使用ProbeNice医学影像系统</h3>
                <p>请选择左侧菜单项开始操作</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { House, User, Picture, Upload, DataAnalysis, Document, Setting, ArrowDown } from '@element-plus/icons-vue'
import PatientListView from './PatientListView.vue'
import UploadTestView from './UploadTestView.vue'
import UserManagementView from './UserManagementView.vue'
import HealthManagementView from './HealthManagementView.vue'

const router = useRouter()
const activeMenu = ref('')
const username = ref('')

// 计算属性：根据当前选中的菜单项显示标题
const contentTitle = computed(() => {
  const titles = {
    dashboard: '工作台',
    patients: '患者管理',
    'dicom-viewer': '影像查看器',
    upload: '文件上传',
    analysis: '影像分析',
    reports: '报告管理',
    'user-management': '用户管理',
    'health-management': '健康管理',
    settings: '系统设置'
  }
  return titles[activeMenu.value] || '欢迎使用'
})

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

// 处理用户下拉菜单命令
const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人资料页面
      ElMessage.info('个人资料功能待开发')
      break
    case 'settings':
      // 跳转到系统设置页面
      activeMenu.value = 'settings'
      break
    case 'logout':
      logout()
      break
    default:
      break
  }
}

// 退出登录
const logout = () => {
  localStorage.removeItem('isAuthenticated')
  localStorage.removeItem('token')
  localStorage.removeItem('savedUsername')
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 页面加载时检查认证状态
onMounted(() => {
  // 检查用户是否已认证
  const isAuthenticated = () => {
    const authStatus = localStorage.getItem('isAuthenticated') === 'true'
    const token = localStorage.getItem('token')
    return authStatus && token
  }
  
  // 获取用户名
  username.value = localStorage.getItem('savedUsername') || '用户'
  
  // 如果用户未认证，则重定向到登录页面
  if (!isAuthenticated()) {
    router.push('/login')
  }
})
</script>

<style scoped>
.main-view {
  height: calc(98vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-header {
  background-color: #409eff;
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.logo-icon {
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logout-btn {
  color: white;
  border-color: white;
}

.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.content-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-col {
  width: 60px;
  height: 100%;
  background-color: white;
  border-right: 1px solid #ebeef5;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.content-col {
  flex: 1;
  height: 100%;
  padding: 0 1px;
}

.menu-card {
  height: 100%;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.menu-list {
  height: 100%;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.menu-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  color: #909399;
}

.menu-item:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.menu-item.active {
  background-color: #409eff;
  color: white;
}

.content-card {
  height: 100%;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.content-area {
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;
}
</style>
